<%--
  Created by IntelliJ IDEA.
  User: 59499
  Date: 2023/5/31
  Time: 16:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录页面</title>
    <script src="${pageContext.request.contextPath}/js/jquery.js"></script>
    <script>
        <%--        页面加载完成就调用这个方法--%>
        $(function (){
            $.ajax({
                type:"post",
                url:"${pageContext.request.contextPath}/user/getRoleList",
                dataType:"json",
                //这里的data是controller拿到的集合
                success:function (data){
                    var option="";
                    $.each(data,function (i,n){
                        option+="<option value="+n.id+">"+n.name+"</option>";
                    })
                    //    $("role")id选择器，将option语句放入
                    $("#role").append(option);
                }
            })
        })
    </script>
    <style>
        body{
            background:url(../img/c6f7e623c34f5a976d49b1dfa6437031.jpg) no-repeat center top;
            background-size:100%,100%;
            background-attachment:fixed;
            background-position: center;
            background-repeat: no-repeat;

        }
    </style>
<%--    <link href="css/login.css" rel="stylesheet">--%>
    <script>
        function change(){
            var img = document.getElementById("img");

            img.src = "${pageContext.request.contextPath}/getVerifyCode?time="+new Date();
        }
        function toRegister(){
            window.location.href="${pageContext.request.contextPath}/user/toRegister";
        }
    </script>
</head>
<%--<body style="background-color: aqua;">--%>
<body >
<div style="margin-top: 200px;margin-left: 500px;border: 1px solid #000; width:372px;padding-left: 20px ">
    <h1>用户登入</h1>
    <a href="javascript:toRegister()">
        注册
    </a>
    <span style="color: red;margin-left: 99px; text-align: center" >${requestScope.msg}</span>
    <br/><br/>
    <form action="${pageContext.request.contextPath}/user/login" method="post">

<%--        <span style="color: red;margin-left: 99px; text-align: center" >${requestScope.msg}</span>--%>
        <label>用户名：</label>
        <input style="height: 40px;" type="text" name="userName" /><br/><br/>
        <label>密&nbsp;&nbsp;&nbsp;码：</label>
        <input style="height: 40px;" type="password" name="userPwd" /><br/><br/>

            <div style="display: flex; flex-direction: row">
            <label>验证码：</label>
            <input style=" height: 40px;margin-left: 3px"  type="password" name="verityCode"/><br/><br/>
            <a href="javascript:change()">
                <img style="margin-left: 10px;height: 40px" id="img" width="100px" src="${pageContext.request.contextPath}/getVerifyCode">
            </a>
            </div>
    <label style="margin-top: 10px">角&nbsp;&nbsp;&nbsp;色：</label>
    <select id="role" name="roleId" style="margin-top: 20px;width: 94px;height: 32px">
        <option value="0">请选择角色</option>
    </select>

        <br/><br/>
        <div style="text-align: center;margin-left: -57px;margin-top: -17px;margin-bottom: 10px" >
            <input type="submit" value="登入" id="myBtn" style="text-align: center;width: 97px;height:40px;margin-top: 10px"/>
        </div>

    </form>

</div>
</body>
</html>
